<!-- 表格组件 -->
<script lang="ts" setup>
import type { TableInstance } from 'element-plus';

import { whManagerBsTbEqpDeleteByIdIdUsingPost } from '@/genapi/wh';

import { injectState } from '../state';
import DetailDialog from './detail-dialog.vue';
import SheetItem from './sheet-item.vue';

defineOptions({ name: 'Sheet' });

const {
  selectedList,
  page: { records, isLoading, execute },
} = injectState()!;

const detailDialogRef = shallowRef<InstanceType<typeof DetailDialog>>();

const tableRef = shallowRef<TableInstance>();

watch(records, () => tableRef.value?.clearSelection());

const selectionChange = (rows: any) => {
  selectedList.value = toRaw(rows);
};
const onDelete = async (row: (typeof records.value)[0]) => {
  await ElMessageBox.confirm(
    `您即将删除【${row.name ?? '未知'}】，删除后不可恢复，是否确认删除？`,
    '提示',
    {
      type: 'error',
    },
  );
  await whManagerBsTbEqpDeleteByIdIdUsingPost({ path: { id: row.id! } });
  ElMessage.success('删除成功');
  await execute();
};
</script>

<template>
  <el-table
    ref="tableRef"
    v-loading="isLoading"
    :data="records"
    h="100%!"
    @selection-change="selectionChange"
  >
    <el-table-column type="selection" width="40" fixed="left" />

    <SheetItem />

    <el-table-column v-slot="{ row }" label="操作" align="center" width="200" fixed="right">
      <el-button size="small" type="primary" text @click="detailDialogRef?.trigger('detail', row)">
        详情
      </el-button>
      <el-button size="small" type="primary" text @click="detailDialogRef?.trigger('edit', row)">
        编辑
      </el-button>
      <el-button size="small" type="primary" text @click="onDelete(row)"> 删除 </el-button>
    </el-table-column>
  </el-table>
  <DetailDialog ref="detailDialogRef" />
</template>
